import { useEffect } from "react"
import { getChannel, toggleChannel } from "../store/actions/channel"
import { useDispatch, useSelector } from "react-redux"
import classNames from "classnames"
const Channel = () => {
  const dispatch = useDispatch()
  const channels = useSelector((state) => state.channel.list)
  const activeId = useSelector((state) => state.channel.activeId)
  useEffect(() => {
    dispatch(getChannel()) // 只会执行一次 因为dispatch不会发生变化
  }, [dispatch])
  return (
    <ul className="category">
      {channels.map((item) => (
        <li
          className={classNames({ select: item.id === activeId })}
          key={item.id}
          onClick={() => dispatch(toggleChannel(item.id))}
        >
          {item.name}
        </li>
      ))}
    </ul>
  )
}
export default Channel
